<template>
  <el-dialog
    title="预览"
    :visible="this.value"
    :modal-append-to-body="false"
    width="80%"
    top="0px;"
    :close-on-click-modal="false"
    :before-close="
        () => {
          $emit('input', false)
          if(mediaPreview!==null&&mediaPreview.type === 1) {
            this.$refs.video.pause();
          }
        }
      "
    :append-to-body="false"
    style="text-align: center"
  >
    <img
      v-if="mediaPreview!==null&&mediaPreview.type === 0"
      :style="previewStyle()"
      :src="mediaPreview.creativeUrl||mediaPreview.link"
    />
    <img
      v-if="isGifImg() "
      :style="previewStyle()"
      :src="mediaPreview.creativeUrl||mediaPreview.link"
    />
    <video
      ref="video"
      v-else-if="mediaPreview!==null&&mediaPreview.type === 1"
      :src="mediaPreview.creativeUrl||mediaPreview.link"
      :style="previewStyle()"
      controls="controls"
    ></video>
  </el-dialog>
</template>

<script>
export default {
  name: "CreativeCardPreview",
  props: {
    value: {
      type: Boolean,
      default: false
    },
    mediaPreview: {
      type: Object
    }
  },
  methods: {
    previewStyle() {
      let height = window.innerHeight < 300 ? 300 : window.innerHeight - 160;
      return {
        maxWidth: "100%",
        maxHeight: height + "px",
      };
    },
    isGifImg() {
      if (this.mediaPreview === null) return
      let fileName = this.mediaPreview.creativeUrl != undefined ? this.mediaPreview.creativeUrl : this.mediaPreview.link;
      if (fileName == undefined || fileName == '') {
        return false;
      }
      let suffix = fileName.split('.').pop().toLowerCase();
      return ['gif'].indexOf(suffix.toLowerCase()) !== -1;
    }
  }
}
</script>

<style scoped>

</style>
